import React, { Component } from "react";
import { actions } from "./_index";
import { connect } from "react-redux";
import ReactPullLoad, { STATS } from "react-pullload";

class View extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasMore: true,
      // data: cData,
      action: STATS.init,
      index: 5,
      page: 1,
      ajaxCfg: {
        url: "/home/mediareports",
        cfg: {
          page_number: "1",
          page_size: "20",
        },
        headers: {},
      },
    };
  }
  getDatapdd(page, prevData) {
    const { getPDD } = this.props;
    const { ajaxCfg } = this.state;
    ajaxCfg.cfg.page_number = page;
    getPDD("首次请求", ajaxCfg, prevData);
  }
  componentDidMount() {
    this.getDatapdd(1, []);
    // console.log("我调用");
  }
  handleAction = (action) => {
    console.info(action, this.state.action, action === this.state.action);
    //new action must do not equel to old action
    if (action === this.state.action) {
      return false;
    }

    if (action === STATS.refreshing) {
      //刷新
      this.handRefreshing();
    } else if (action === STATS.loading) {
      //加载更多
      this.handLoadMore();
    } else {
      //DO NOT modify below code
      this.setState({
        action: action,
      });
    }
  };
  handRefreshing = () => {
    if (STATS.refreshing === this.state.action) {
      return false;
    }

    setTimeout(() => {
      //refreshing complete
      this.setState({
        // data: cData,
        hasMore: true,
        action: STATS.refreshed,
        index: 5,
      });
      console.log("刷新");
      this.init();
    }, 3000);

    this.setState({
      action: STATS.refreshing,
    });
  };

  init() {
    // 代码初始化
    this.getDatapdd(1, []);
  }
  handLoadMore = () => {
    const { pddApi } = this.props.down;
    console.log(pddApi);
    if (STATS.loading === this.state.action) {
      return false;
    }
    //无更多内容则不执行后面逻辑
    if (!this.state.hasMore) {
      return;
    }

    setTimeout(() => {
      if (this.state.index === 0) {
        this.setState({
          action: STATS.reset,
          hasMore: false,
        });
      } else {
        this.setState({
          //   data: [...this.state.data, cData[0], cData[0]],
          action: STATS.reset,
          index: this.state.index - 1,
        });
      }
      console.log("加载更多");
      this.setState((state, props) => {
        page: state.page++;
      });
      this.getDatapdd(this.state.page, pddApi);
    }, 3000);

    this.setState({
      action: STATS.loading,
    });
  };
  lists() {
    const { pddApi } = this.props.down;
    console.log(pddApi);
    const lists = pddApi.map((val, index) => {
      return (
        <li key={index} style={{ height: "40px" }}>
          {index + 1}、{val.main_title}
        </li>
      );
    });
    return lists;
  }
  render() {
    const { down } = this.props;
    console.log(down);
    const { hasMore } = this.state;
    // const fixHeaderStyle = {
    //   position: "fixed",
    //   width: "100%",
    //   height: "50px",
    //   color: "#fff",
    //   lineHeight: "50px",
    //   backgroundColor: "#e24f37",
    //   left: 0,
    //   top: 0,
    //   textAlign: "center",
    //   zIndex: 1,
    // };
    return (
      <React.Fragment>
        {/* <div style={fixHeaderStyle}>fixed header</div> */}
        <ReactPullLoad
          downEnough={150}
          action={this.state.action}
          handleAction={this.handleAction}
          hasMore={hasMore}
          style={{ paddingTop: 50 }}
          distanceBottom={1000}
        >
          <ul className="test-ul" style={{ touchAction: "none" }}>
            {/* <button onClick={this.handRefreshing}>refreshing</button>
            <button onClick={this.handLoadMore}>loading more</button> */}
            {down.pddApi && this.lists()}
          </ul>
        </ReactPullLoad>
      </React.Fragment>
    );
  }
}
const mapStateToProps = (state) => {
  // console.log(state);
  return {
    down: state.downup,
  };
};
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    getPDD: (text, ajaxCfg, prevData) =>
      dispatch(actions.getFn(text, ajaxCfg, dispatch, prevData)),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(View);
